<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,user-scalable=no"
    />
    <title>情人节-玫瑰花</title>
    <style type="text/css">
      html,
      body {
        height: 100%;
      }
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        perspective: 500px;
        perspective-origin: 50% 0%;
        overflow: hidden;
      }
      .center {
        position: absolute;
        left: 50%;
        top: 200px;
        width: 0;
        height: 0;
        transform-style: preserve-3d;
      }
      .flower-translate {
        transform: translateZ(100px);
        transform-style: preserve-3d;
        transform-origin: center bottom;
        position: absolute;
        left: -50px;
        width: 100px;
        height: 100px;
      }
      .flower-rotate {
        width: 100px;
        height: 100px;
        transform: rotateX(20deg);
        transform-style: preserve-3d;
        transform-origin: center bottom;
      }
      .flower {
        width: 100px;
        height: 100px;
        border-top-left-radius: 35%;
        border-top-right-radius: 35%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        transform-origin: center bottom;
        background: -moz-linear-gradient(top, #f66, #f30819 10%, #4a0004);
        background: -webkit-linear-gradient(top, #f66, #f30819 10%, #4a0004);
        background: linear-gradient(top, #f66, #f30819 10%, #4a0004);
      }
      .leaf {
        position: absolute;
        left: 30px;
        width: 40px;
        height: 100px;
        transform-origin: center bottom;
      }
      .left {
        position: absolute;
        left: 0;
        top: 0;
        height: 100px;
        width: 20px;
        overflow: hidden;
      }
      .left::after {
        position: absolute;
        left: 0;
        top: -20px;
        height: 140px;
        width: 120px;
        border-radius: 50%;
        background: #27671c;
        content: '';
      }
      .left::before {
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background: #999;
      }
      .right {
        position: absolute;
        right: 0;
        top: 0;
        height: 100px;
        width: 20px;
        overflow: hidden;
      }
      .left::before {
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background: #999;
      }
      .right::after {
        position: absolute;
        right: 0;
        top: -20px;
        height: 140px;
        width: 120px;
        border-radius: 50%;
        background: #27671c;
        content: '';
      }
      .branch {
        position: absolute;
        top: 100px;
        left: -11px;
        width: 20px;
        height: 300px;
        background: #27671c;
        border: solid 1px rgba(0, 0, 0, 0.2);
      }
      @keyframes rotate {
        0% {
          transform: rotateY(0);
        }
        100% {
          transform: rotateY(360deg);
        }
      }
    </style>
  </head>
  <body bgcolor="#000000">
    <div id="box"></div>
    <script>
      var container = document.querySelector('#box');
      function addFlower(
        startDeg,
        len,
        translateLen,
        rotateDeg,
        scaleX,
        scaleY,
        type
      ) {
        var deg = Math.round(360 / len);
        var frag = document.createDocumentFragment();
        for (var i = 0; i < len; i++) {
          var translate = createDiv('flower-translate');
          var rotate = createDiv('flower-rotate');
          var flower = createDiv(type == 'leaf' ? 'leaf' : 'flower');
          translate.style.transform =
            'rotateY(' +
            (startDeg + deg * i + ~~random(-2, 2)) +
            'deg) translateZ(' +
            (translateLen + ~~random(-3, 3)) +
            'px)';
          rotate.style.transform =
            'rotateX(' + (rotateDeg + ~~random(-1, 2)) + 'deg)';
          flower.style.transform =
            'scaleX(' + scaleX + ') scaleY(' + scaleY + ')';
          rotate.appendChild(flower);
          translate.appendChild(rotate);
          frag.appendChild(translate);
        }
        return frag;
      }
      function createDiv(className) {
        var div = document.createElement('div');
        div.className = className;
        if (className == 'leaf') {
          div.appendChild(createDiv('left'));
          div.appendChild(createDiv('right'));
        }
        return div;
      }
      function random(start, end) {
        return start + Math.random() * (end - start);
      }
      function createFlower() {
        var flower = createDiv('center');
        flower.appendChild(addFlower(0, 6, 20, 5, 0.4, 1.13));
        flower.appendChild(addFlower(0, 8, 30, 0, 0.5, 1.18));
        flower.appendChild(addFlower(20, 8, 43, -3, 0.7, 1.2));
        flower.appendChild(addFlower(40, 10, 65, -5, 0.8, 1.13));
        flower.appendChild(addFlower(50, 12, 76, -7, 0.8, 1.03));
        flower.appendChild(addFlower(70, 6, 76, -19, 0.9, 0.9));
        flower.appendChild(addFlower(100, 6, 80, -35, 0.9, 0.9, 'leaf'));
        return flower;
      }
      function createBranch() {
        var box = createDiv('center');
        for (var i = 0; i < 6; i++) {
          var branch = createDiv('branch');
          branch.style.transform = 'rotateY(' + 30 * i + 'deg)';
          box.appendChild(branch);
        }
        return box;
      }
      function createBunchFlower() {
        var frag = document.createDocumentFragment();
        var branch = createBranch();
        var flower = createFlower();
        // var styles = [
        //   'scale(0.43) translate3D(-150px,-50px,-130px)',
        //   'scale(0.43) translate3D(150px,-50px,-130px)',
        //   'scale(0.41) translate3D(-270px,-30px,-80px)',
        //   'scale(0.41) translate3D(270px,-30px,-80px)',
        //   'scale(0.48) translate3D(-0px,-10px,-50px)',
        //   'scale(0.38) translate3D(-220px,10px,40px)',
        //   'scale(0.38) translate3D(220px,10px,40px)',
        //   'scale(0.37) translate3D(-120px,24px,130px)',
        //   'scale(0.37) translate3D(120px,24px,130px)',
        //   'scale(0.35) translate3D(-0px,40px,210px)'
        // ];

        // for (var i = 0; i < styles.length; i++) {
        //   var temp = flower.cloneNode(true);
        //   temp.style.transform = styles[i] + ' rotateX(-16deg)';
        //   frag.appendChild(temp);
        // }
        flower.style.animation = 'rotate 15s linear infinite';
        branch.style.animation = 'rotate 15s linear infinite';
        container.appendChild(branch);
        container.appendChild(flower);
      }
      createBunchFlower();
    </script>
  </body>
</html>
